<template>
    <div id="cb_head">
        <el-tabs type="border-card">
            <el-tab-pane label="所有菜品">
                <!--以下是菜品查询-->
                <div class="cb_chaxun">
                    <el-input
                            placeholder="请输入菜品名称"
                            v-model="input"
                            clearable class="search">
                    </el-input>
                    <el-button type="primary" @click="selectCai"><i class="el-icon-search"></i></el-button>
                </div>

                <!--以下是菜品展示表-->
                <div class="cb_biao">
                    <el-table
                            :data="this.CaiPinData"
                            border
                            style="width: 85%"
                            :cell-style="cell_style"
                            :header-cell-style="header_style">
                        <el-table-column
                                prop="id"
                                label="菜品id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="菜品名称">
                        </el-table-column>
                        <el-table-column
                                prop="classifyName"
                                label="菜品类型">
                        </el-table-column>

                        <el-table-column
                                prop="price"
                                label="菜品价格">
                        </el-table-column>
                        <el-table-column prop="picture" label="菜品图片" width="180">
                            <template slot-scope="scope">
                                <img :src="'http://106.14.138.71:8080/rms/'+scope.row.picture" alt="" width="40" height="40">
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button class="cb_xiugaibtn"
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">修改
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 以下是分页-->
                <div class="block">
                    <el-pagination hide-on-single-page
                                   layout="prev, pager, next"
                                   :total="15"
                                   :page-size="5"
                                   :pager-count="5"
                                   @current-change="changePage"
                    >
                    </el-pagination>
                </div>

               <!-- 以下是修改弹出框-->
                <el-dialog title="修改菜品信息" :visible.sync="dialogFormVisible" width="25%"
                           center>
                    <el-form :model="form" size="mini">
                        <el-form-item label="菜品编码:" :label-width="formLabelWidth">
                            <p>{{form.id}}</p>
                        </el-form-item>
                        <el-form-item label="菜品名称:" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品类型：">
                            <!-- <el-input  style="width:600px;" v-model="Parm.classifyId" :disabled="type=='show'" ></el-input>-->
                            <el-select v-model="form.classifyId" placeholder="请选择菜品类型">
                                <el-option
                                        v-for="item in options"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜品价格:" :label-width="formLabelWidth">
                            <el-input v-model="form.price" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品图片:" :label-width="formLabelWidth">
                            <template slot-scope="scope" v-model="form.picture">
                                <img :src="'http://106.14.138.71:8080/rms/'+form.picture" alt="" width="40" height="40">
                            </template>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="cbtijiao">提 交</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>


            </el-tab-pane>

            <!--以下是添加商品-->
            <el-tab-pane label="添加菜品">
                <Zujian_tianjiacai></Zujian_tianjiacai>
            </el-tab-pane>


        </el-tabs>
    </div>

</template>

<script>
    import {mapActions, mapState} from 'vuex'
   /* import axios from 'axios'/!*'../../http/http'*!/*/
    import axios from '../../http/http'
    import * as api from '../../http/api'
    import Zujian_tianjiacai from "./cb_cptj"
    axios.defaults.withCredentials = true

    export default {
        components: {
            Zujian_tianjiacai,
        },
        data() {
            return {
                input: '',//输入框初始值
                dialogTableVisible: false,
                dialogFormVisible: false,
                file:'',
                src:'',
                fileList: [],
                formData :'',
                dialogImageUrl: '',
                dialogVisible: false,
                options:[],
                form: {
                    id: '',
                    name: '',
                    classifyName:'',
                    classifyId:'',
                    price: '',
                },
                formLabelWidth: '100px',
                message: 555
            }
        },
        methods: {
            getleixing2() {
                let data= {
                    "currentPage": 1,
                    'pageSize':999
                }
                /*  let config={
                      headers:{ 'Content-Type':'multipart/form-data'}
                  }*/
                axios.post('rms/menu/classify/select',data).then(res => {
                  /*  console.log(987456)
                    console.log(res)*/
                    this.options=res.data.list
                }).catch(error=>{

                })

            },
            ...mapActions(['getCaiPinData']),
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            ...mapActions(['cb_getData']),
            changePage(val) {
                let data= {
                    "currentPage": val,
                    'pageSize':5
                }
              /*  this.currentPage = val //改变页面的时候，应该重新渲染数据
                console.log(val)*/
                this.getCaiPinData(data)
            },
            handleEdit(index, item) {
                this.dialogFormVisible = true
                this.form.id = item.id
                this.form.name = item.name
                this.form.price = item.price
                this.form.picture = item.picture
            },


            //下面是删的的点击事件
            ...mapActions(['delete']),
            handleDelete(index, row) {
                let data={'id':row.id}
                this.delete(data)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            },
           /* ...mapActions(['upcaidata']),*/
               uploading(event){
                            this.file = event.target.files[0];//获取文件
                            var windowURL = window.URL || window.webkitURL;
                            this.file = event.target.files[0];
                            this.src = windowURL.createObjectURL(event.target.files[0]);
                        },
            cbtijiao(){
                if(this.fileList.length==0){
                    this.formData = new FormData()
                }

                if(this.form.name!==null){
                    /*console.log("name!")*/
                    this.formData.append('name',this.form.name);
                }
                if(this.form.id!==null){
              /*      console.log("id!")*/
                    this.formData.append('id',this.form.id);
                }
                if(this.form.classifyId!==null){
                   /* console.log("classifyId!")*/
                    this.formData.append('classifyId',this.form.classifyId);
                }
                if(this.form.price!==null){
                    this.formData.append('price',this.form.price);
                }
                  let data={
                    'id': this.form.id,
                    "name":this.form.name,
                    "classifyId": this.form.classifyId,
                    "price": this.form.price,
                }
         /*       console.log(this.form.classifyName)
                console.log(this.form.classifyId)*/

           /*     console.log(data)*/
                /*console.log(typeof this.file)
                console.log(this.file)*/

             /*   console.log(typeof this.formData.get('id'))
                console.log(typeof this.formData.get('picture'),)*/
                let config1={
                    headers:{
                        /*'Content-Type':'multipart/form-data'*/
                        'Content-Type':'application/json;'
                    }
                }
                axios.post('/rms/menu/setting/update',this.formData,config1).then(res => {
                /*    console.log(22222)
                    console.log(res)*/
                }).catch(error=>{

                })

            /*this.upcaidata(data)*/
                this.dialogFormVisible = false
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
            },
            // 1，上传前移除事件
            beforeRemove (file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`)
            },
            // 2，上传前事件
            beforeupload (file) {
                // 2.1，重新写一个表单上传的方法
                this.formData = new FormData()
           /*     this.fileList.push(file) // 把单个文件变成数组
                //上传操作前将file放进form
                this.formData.append("picture",file)*/
               /* console.log(789)*/
                return false
            },
            // 3，点击文件列表中已上传的文件时的钩子
            handlePictureCardPreview (file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            },

            // 5设置超过给与提示
            exceedHandle () {
                this.$message({
                    message: '超过上传最大数目',
                    type: 'warning'
                });
            },


            //以下是查询的方法
            ...mapActions(['selectCaipin']),
            selectCai() {
                let obj = {name: this.input}
                if (this.input != '') {
                    this.selectCaipin(obj)
                }
                else {
                    let data= {
                        "currentPage": 1,
                        'pageSize':5
                    }
                    this.getCaiPinData(data)
                }
            }
        },
        computed: {
            ...mapState({
                //计算vuex里面的数据
                //这里就相当于获取了 store 里面的数据
                //cb-菜品第五行，在将当前页数据质控
                CaiPinData: function (state) {
                    return state.cb_caipinStore.CaiPinData
                    //获取cb_caipinstore.js文件里面的caipindata 当前页参数。
                }
            }),
            //计算当前页数据和总数据条数
            total() {
                return this.CaiPinData.length
            },
        },

        created() {
            //渲染页面*/
            let data= {
                "currentPage": 1,
                'pageSize':5
            }
            this.getCaiPinData(data).then(res=>{
             /*   console.log(res)*/
            })
            this.getleixing2()

        }

    }

</script>

<style scoped lang="less">

    .el-table {
        margin: auto;
    }

    .cb_chaxun {
        width: 50%;
        float: right;
        padding: 10px;
        margin-bottom: 10px;

        .search {
            width: 50%;
        }

        .el-button {
            margin-left: 20px;
        }
    }

    .cb_xiugaibtn{
        background-color: #409EFF;
    }


</style>